<template>
	<view class="number-scroll">
		<u-count-to ref="uCountTo" :duration="step" :start-val="prevNum" :end-val="nextNum" :autoplay="false" :decimals="2" color="#EB0200" fontSize="72" :bold="true"></u-count-to>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				timer: null,
				prevNum: 0,
				nextNum: 0,
				count: 0,
				step: 1000,
				num: 0
			}
		},
		props: {
			endVal: {
				type: Number,
				default: 100
			},
			duration: {
				type: Number,
				default: 5000
			}
		},
		mounted() {
			this.startCount()
		},
		methods: {
			startCount(){
				setInterval(()=>{
					this.num = Math.floor(Math.random()*1000)
				}, 10)
				let step = this.step / 2
				this.counting(step)
				this.timer = setInterval(()=>{
					this.counting(step)
					if(this.count >= this.duration){
						this.nextNum = this.endVal
						this.$refs.uCountTo.start()
						clearInterval(this.timer)
						setTimeout(()=>{
							this.$emit('end')
						}, this.step)
					}
					// console.log(this.prevNum, this.nextNum);
				}, step)
			},
			stopCount(){
				clearInterval(this.timer)
				this.nextNum = 0
				this.prevNum = 0
				this.count = 0
			},
			counting(step){
				let data = parseFloat((Math.random()*1000).toFixed(2))
				this.prevNum = 0
				this.nextNum = data
				this.$refs.uCountTo.start()
				this.count += step
			}
		}
	};
</script>

<style>
</style>